import React from 'react';
import { CodeSandboxOutlined, EditOutlined } from '@ant-design/icons';
import { Avatar, Button, Card, Flex, Space, Typography } from 'antd';
import { getLogos } from '@/store/slice/app';
const { Text } = Typography;

interface DatabaseProps {
  database: Bn.Meta.MetaDatabase;
}

const DatabaseTitle = ({ database }: DatabaseProps) => {
  const logos = useAppSelector(getLogos);

  return (
    <Card style={{ width: '100%', borderRadius: 0 }}>
      <Flex
        justify={'space-between'}
        align={'center'}
        // style={{ padding: 10 }}
      >
        <Space
          wrap
          size={16}
        >
          <Avatar
            shape="square"
            size={32}
            src={logos[database?.dbType]}
          />
          <Text strong>{database?.friendlyName}</Text>
          <>|</>
          <Text type="secondary">创建人：{database?.lastModifiedUserName}</Text>
        </Space>
        <Space
          wrap
          size={16}
        >
          <Button icon={<CodeSandboxOutlined />}>新建数据仓库</Button>
          <Button
            type="primary"
            icon={<EditOutlined />}
          >
            编辑
          </Button>
        </Space>
      </Flex>
    </Card>
  );
};

export default DatabaseTitle;
